<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
            text-align:center
        }
    </style>
    <script src = 'common.js'></script>
    <script>
        var students = [
            [1, '手机', 100, 'xx1.jpg'],
            [2, '手机', 100, 'xx1.jpg'],
            [3, '手机', 100, 'xx1.jpg'],
            [4, '手机', 100, 'xx1.jpg'],
            [5, '电脑', 200, 'xx1.jpg'],
            [6, '电脑', 200, 'xx1.jpg'],
            [7, '电脑', 200, 'xx1.jpg'],
            [8, '电脑', 200, 'xx1.jpg'],
            [9, 'MP3', 300, 'xx1.jpg'],
            [10, 'MP3', 300, 'xx1.jpg'],
            [11, 'MP3', 300, 'xx1.jpg'],
            [12, 'MP3', 300, 'xx1.jpg'],
            [13, '打印机', 400, 'xx1.jpg']
        ];

        //生成表格的方法
        var grid = function(title, col, data) {
            //表格的标题
            var p = $C('p');
            p.textContent = title;
            document.body.appendChild(p);

            //表格部分
            var g = $C('table');
            g.border = 1;
            g.style.margin = '0 auto';
            g.style.width = '80%';
            g.style.border = '1px solid #efefef';
            g.style.borderCollapse = 'collapse';
            document.body.appendChild(g);

            //表格的列头
            var tr = $C('tr');
            g.appendChild(tr);
            for (var i = 0; i < col.length; i++) {
                var th = $C('th');
                th.style.width = '25%';
                th.textContent = col[i];
                tr.appendChild(th);
            }

            //表格数据展示
            for (var i = 0; i < data.length; i++) {
                //新建tr元素
                var tr = $C('tr');
                g.appendChild(tr);

                //填充表格的数据展示
                var arr = data[i];//['张三', '0', 21, '../../xx1.png']
                for (var j = 0; j < arr.length; j++) {
                    var td = $C('td');
                    //第2列
                    /*if (1 == j) {
                     //为0给td设置男, 1设置女
                     if (0 == arr[j]) {
                     td.textContent = '男';
                     } else if (1 == arr[j]) {
                     td.textContent = '女';
                     }
                     } else */if (3 == j) {//第4列
                        td.style.cursor = 'pointer';
                        td.textContent = '查看';
                        td.setAttribute('path', arr[j]);//设置属性 属性名称 - 属性内容
                        td.onclick = function() {
                            //生成图片对象并且指定图片地址
                            var img = $C('img');
                            img.src = this.getAttribute('path');//访问属性
                            img.style.width = 280 + 'px';
                            img.style.height = 180 + 'px';
                            //调用窗口方法,将图片对象传递给窗口
                            win(300, 240, '大头照', img);
                        };
                    } else {
                        //非第2列
                        td.textContent = arr[j];
                    }

                    tr.appendChild(td);
                }
            }
        };

        window.onload = function() {
            grid('商品信息', ['序号', '商品名称', '价格', '照片'], students);
        };
    </script>
</head>

<body>
<div class = 'bar'>
    <button>新增</button>
</div>
<div class = 'page'>
    <button id = 'btnHome'>首页</button>
    <button id = 'btnPrev'>上页</button>
    &nbsp;第<span id = 'spaNum'></span>页 / 一共有<span id = 'spaAll'></span>页&nbsp;
    <button id = 'btnNext'>下页</button>
    <button id = 'btnLast'>末页</button>
    每页<select id = 'selPageNum'><option value = 5>5</option><option value = 10>10</option><option value = 20>20</option></select>笔
</div>
</body>
</html>